<template>
    <div class="user">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.user" placeholder="请输入姓名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="add">增加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="1000" class="page"> </el-pagination>
        <el-button type="text" @click="dialogVisible = true"></el-button>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="姓名">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="formLabelAlign.region"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 '
                },
                {
                    date: '2016-05-04',
                    name: '王发发',
                    address: '四川成都市某桥洞'
                },
                {
                    date: '2016-05-01',
                    name: '皮皮虾',
                    address: '四川弗洛里达州'
                },
                {
                    date: '2016-05-03',
                    name: '渣渣辉',
                    address: '四川省成都市双流区某下水道'
                }
            ],
            dialogVisible: false,
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            }
        };
    },
    methods: {
        add() {
            this.formLabelAlign.name = '';
            this.formLabelAlign.region = '';
            this.dialogVisible = true;
        },
        sure() {
            this.tableData.push({
                date: '2016-05-01',
                name: this.formLabelAlign.name,
                address: this.formLabelAlign.region
            });
            this.dialogVisible = false;
        },
        onSubmit() {
            console.log('submit!');
            if (this.formInline.user.length > 0) {
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.formInline.user === this.tableData[i].name) {
                        this.dialogVisible = true;
                        this.formLabelAlign.name = this.tableData[i].name;
                        this.formLabelAlign.region = this.tableData[i].address;
                    }
                }
            } else {
                alert('不能输入为空');
            }
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.tableData.splice(index, 1);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        }
    }
};
</script>

<style lang="scss" scoped>
.user {
    width: calc(100vw - 220px);
    padding-top: 10px;
    .page {
        margin-top: 20px;
    }
}
</style>
